import 'package:cached_network_image/cached_network_image.dart';
import 'package:earclean/app/config/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/src/size_extension.dart';

class SendMsgBox extends StatelessWidget {
  final String message, avatar, time;

  SendMsgBox({required this.message, required this.time, required this.avatar});

  @override
  Widget build(BuildContext context) {
    final messageTextGroup = Flexible(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Flexible(
            child: Container(
              margin: EdgeInsets.only(top: 10),
              padding: EdgeInsets.all(14),
              decoration: BoxDecoration(
                color: ColorConfig.app_main,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(10),
                  bottomLeft: Radius.circular(10),
                  bottomRight: Radius.circular(10),
                ),
              ),
              child: Text(
                message,
                style: TextStyle(color: Colors.white, fontSize: 14),
              ),
            ),
          ),
          // CustomPaint(painter: MsgArrowPainter(Color(0XFF98E165))),
          SizedBox(width: 10),
          ClipOval(
            child: Container(
              color: ColorConfig.white,
              child: Image.asset(
                avatar,
                width: 46.r,
                height: 46.r,
                fit: BoxFit.fill,
              ),
            ),
          )
          // ClipOval(
          //   child: LoadNetworkImageWidget(
          //     width: 46.r,
          //     height: 46.r,
          //     fit: BoxFit.fill,
          //     imageUrl: avatar,
          //   ),
          // ),
        ],
      ),
    );

    return setUpUi(messageTextGroup);
  }

  Widget setUpUi(Flexible messageTextGroup) {
    return Column(
      children: [
        Container(
          padding: EdgeInsets.only(top: 15, bottom: 5),
          child: Text(
            time,
            style: TextStyle(color: Colors.grey.shade300, fontSize: 12),
          ),
        ),
        Padding(
          padding: EdgeInsets.only(
            right: 10.0,
            left: 50,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              SizedBox(height: 30),
              messageTextGroup,
            ],
          ),
        ),
      ],
    );
  }
}
